<template>
  <div class="tankuang2">
    <div class="top">
      <div class="name">鲜活生蚝1kg/袋</div>
      <div class="guanbi" @click="guanbi">
        <img src="@/assets/home/cha.png" alt />
      </div>
    </div>
    <div class="guige">
      <div class="p4">规格</div>
      <div class="ggbtn">
        <div class="btn1">规格一</div>
        <div class="btn2">规格二</div>
      </div>
    </div>
    <div class="guige">
      <div class="p4">数量</div>
      <div class="num">
        <input class="input" placeholder="请输入采购数量" type="number" />
      </div>
    </div>
    <div class="yixuan">
      <span class="span1">
        已选规格：
        <span class="span2">规格一、100份</span>
      </span>
    </div>
    <div class="zong">
      <div class="left">
        <span class="p9">
          总计
          <span class="p8">
            ￥
            <span class="p7">199.00</span>
          </span>
        </span>
      </div>
      <div class="right">确定采购</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    guanbi() {
        this.$emit("guanbi");
    },
  },
};
</script>

<style lang="scss" scoped>
.tankuang2 {
  width: 330px;
  background: #ffffff;
  border-radius: 10px;
  .top {
    width: 100%;
    height: 49px;
    position: relative;
    text-align: center;
    .name {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #222222;
      line-height: 49px;
    }
    .guanbi {
      width: 18.5px;
      height: 18.5px;
      position: absolute;
      top: 5px;
      right: 5px;
      img {
        width: 18.5px;
        height: 18.5px;
      }
    }
  }
  .guige {
    .p4 {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-left: 15px;
    }
    .ggbtn {
      display: flex;display: -webkit-flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .btn1 {
        width: 90px;
        height: 37px;
        background: #fdd40a;
        border-radius: 18.5px;
        margin-left: 15px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 37px;
        text-align: center;
        margin-top: 10px;
      }
      .btn2 {
        width: 90px;
        height: 37px;
        background: #ececec;
        border-radius: 18.5px;
        margin-left: 15px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #555555;
        line-height: 37px;
        text-align: center;
        margin-top: 10px;
      }
    }
    .num {
      width: 300px;
      margin: auto;
      display: flex;display: -webkit-flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #d3d3d3;
      .input {
        width: 100%;
        border: none;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
      }
    }
  }
  .yixuan {
    width: 100%;
    height: 33px;
    margin: 22.5px 0 0 0;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    .span1 {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #888888;
      line-height: 33px;
      margin-left: 15px;
      .span2 {
        color: #222222;
      }
    }
  }
  .zong {
    width: 300px;
    margin: 15px;
    display: flex;display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    .left {
      .p9 {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        line-height: 14px;
        .p8 {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ff511e;
          line-height: 12px;
          .p7 {
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ff511e;
            line-height: 18px;
          }
        }
      }
    }
    .right {
      width: 120px;
      height: 40px;
      background: #fdd40a;
      border-radius: 20px;
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #222222;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>